import React, { Component } from 'react';
import FragmentComponent from './Fragment';
import ContextComponent from './Context/ContextComponent';
import HighOrderComponent from './HighOrderComponent';
import Banner from './HighOrderComponent/New/NewBanner';
import Goods from './HighOrderComponent/New/NewGoods';

const arr = [
  {
    provice: '河南', citys: [
      '郑州',
      '周口'
    ]
  },
  {
    provice: '河北', citys: [
      '石家庄',
      '廊坊'
    ]
  },
]

class Home extends Component {
  state = {
    current: 0,
    selectProvice: arr[0].provice,
    selectCity: arr[0].citys[0],
  }
  componentDidMount () {
  }
  itemNav = (index) => {
    return index === this.state.current ? 'item-title active' : 'item-tiele';
  }
  itemCon = (index) => {
    return index === this.state.current ? 'con active' : 'con';
  }

  test =  () => {
    const arr1 = ['a', ['b',2],[['c'],'aaa']]
    arr1.reduce((a,b) => a.concat(b),[]);

    const arrSet = [3,3,5,2,2,2];
    const unique = [...new Set(arrSet)];

  }
  debounce = (func, wait, im) => {
    let timeout;
    return function () {
      let context = this;
      let args = arguments;
      if(timeout) clearTimeout(timeout);
      if(im){
        var callNow = !timeout;
        timeout = setTimeout(()=> {
          timeout = null;
        },wait)
        if(callNow) func.apply(context, args)
      }else{
        timeout = setTimeout(function () {
          func.apply(context, args)
        }, wait)
      }
    }
  }

  changeProvice = (e) => {
    this.setState({selectProvice: e.target.value});
    arr.map((item, index)=>{
      if(e.target.value === item.provice){
        this.setState({selectCity: item.citys[0]});
      }
      return true;
    })
  }
  changeCitys = (e) => {
    this.setState({selectCity: e.target.value});
  }
  render () {
    const provice = arr.map((item, index) => {
      return <option key={index}>{item.provice}</option>
    })
    const city = arr.map((item, index) => {
      if(this.state.selectProvice === item.provice){
        return item.citys.map((item, index) =>
          <option key={index}>{item}</option>
        )
      }
      return true;
    })
    return (
      <div>
        Home
        <FragmentComponent />
        <ContextComponent />
        <HighOrderComponent />
        <Banner />
        <Goods />
        <div className="tabLayout">
          <ul className = "itemContainer">
            {
              React.Children.map(this.props.children,(element, index) => {
                return (
                  <li onClick={ () => { this.setState({current: index})}} className={ this.itemNav(index)}>
                    {element.props.name}
                  </li>
                )
              })
            }
          </ul>
          <div className="itemCon">
            {
              React.Children.map(this.props.children, (element, index) => {
                return (
                  <div onClick = { () => { this.setState({current: index})} }  className={ this.itemCon(index)}>
                    {element}
                  </div>
                )
              })
            }
          </div>
        </div>
        <select value = {this.state.selectProvice} onChange={this.changeProvice.bind(this)}>{provice}</select>
        <select value = {this.state.selectCity} onChange={this.changeCitys.bind(this)}>{city}</select>

      </div>
    )
  }
}
export default class TebComponent extends Component {
  // constructor (props) {
  //   super(props);
  //   this.state = {

  //   };
  // }
  render () {
    return (
      <Home>
        <div name="one">One</div>
        <div name="two">Two</div>
        <div name="three">Three</div>
      </Home>
    )
  }
}